<template>
    <!-- Active: ActiveObject && ActiveObject.id == Config.id  -->
    <div @click.stop :style="{ padding: `${token.marginXXS}px 0 0 0` }"
        :class="{ onDrag: DragState, onActive: DragActiveItem == Config.id, }" :data-treecomp-id="Config.id">
        <div class="TreeCompNameBox" :style="{
            paddingLeft: level * 16 + 'px',
            backgroundColor: BackgroundColor,
            borderRadius: token.borderRadius + 'px',
            borderColor: DragActiveItem == Config.id ? token.colorBorder : ''
        }" @mouseover="() => { Hover = true }" @mouseleave="() => { Hover = false }">
            <div style="display: flex;align-items: center;">
                <div class="Icon" :style="{ marginLeft: token.marginXXS + 'px', }">
                    <slot name="icon"></slot>
                </div>
                <div class="Name" :style="{
                    color: TextColor,
                    fontSize: token.fontSizeLG + 'px',
                    lineHeight: token.lineHeightLG
                }">
                    <slot name="title"></slot>
                </div>
                <div class="Option" :style="{ opacity: Hover ? 1 : 0 }">
                    <a-dropdown :trigger="['click']">
                        <a-button type="text" v-if="!DragState" :icon="h('span', {
                            class: 'iconfont icon-shezhi', style: {
                                color: token.colorTextSecondary
                            }
                        })" @mouseup.stop @mousedown.stop />
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextTertiary }">修改名称</a>
                                </a-menu-item>
                                <!-- <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextTertiary }">另存为</a>
                                </a-menu-item> -->
                                <a-menu-divider />
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextTertiary }">隐藏PC端</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorTextTertiary }">隐藏移动端</a>
                                </a-menu-item>
                                <a-menu-divider />
                                <a-menu-item>
                                    <a href="javascript:;" :style="{ color: token.colorError }">删除</a>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, inject, h, computed } from 'vue'
import { theme } from 'ant-design-vue';

const { token } = theme.useToken();

const props = defineProps(['Config', 'level']);
const Hover = ref(false);

const ActiveObject = inject('ActiveObject')
const DragState = inject('DragState');
const SetChildItem = inject('SetChildItem');
const DragActiveItem = inject('DragActiveItem');

const BackgroundColor = computed(() => {
    if (ActiveObject.value && ActiveObject.value.id == props.Config.id) {
        return token.value.colorPrimaryBg
    } else if (Hover.value) {
        return token.value.colorFillSecondary
    } else {
        return ''
    }
});

const TextColor = computed(() => {
    if (ActiveObject.value && ActiveObject.value.id == props.Config.id) {
        return token.value.colorPrimaryText
    } else if (Hover.value) {
        return token.value.colorTextSecondary
    } else {
        return token.value.colorTextSecondary
    }
})

const ClickEvent = function () {
    return props.Config
}

SetChildItem(props.Config.id, { ClickEvent })




</script>

<style lang="less" scoped>
.onActive {
    pointer-events: none;
    opacity: 0.5;
}


.onDrag * {
    pointer-events: none;
}


.TreeCompNameBox {
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    border: 2px dashed transparent;

    .Icon {
        flex: none;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;

        ::v-deep(img) {
            margin-top: 2px;
            margin-left: 5px;
            width: 20px;
            height: 20px;
        }
    }

    .Name {
        margin: 0;
        padding: 5px;
        overflow: hidden;
        width: 100%;
        line-height: 32px;
    }

    .Option {
        flex: none;
        width: 32px;
        height: 32px;
        margin-left: -1px;
        text-align: center;
    }
}
</style>